<template>
  <div id="detail">
<!--    详情导航栏-->
  <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>
<!--    Bscroll滚动-->
    <scroll class="content" ref="scroll" @scroll="contentScroll" :probe-type="3">
      <!--    商品轮播图-->
      <detail-swiper :top-images="topImages"></detail-swiper>
      <!--    商品基本信息-->
      <detail-base-info :goods="goods"></detail-base-info>
      <!--    店铺基本信息-->
      <DetailShopInfo :shop="shop"></DetailShopInfo>
      <!--    详情图片信息-->
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
      <!--    商品参数信息-->
      <detail-param-info ref="params" :param-info="paramInfo"></detail-param-info>
      <!--    商品评论信息的展示-->
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <!--    推荐信息的展示（使用GoodsList组件）-->
      <goods-list ref="recommend" :goods="recommends"></goods-list>

    </scroll>
      <!--    底部工具栏-->
    <detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
      <!-- 34、一键回到顶部-->
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>

  </div>

</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar";
import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailCommentInfo from "@/views/detail/childComps/DetailCommentInfo";
import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";

import Scroll from "@/components/common/scroll/Scroll";
import GoodsList from "@/components/content/goods/GoodsList";
// import BackTop from "@/components/content/backTop/BackTop";


import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "@/network/detail";
import {debounce} from "@/common/utils";
import {itemListenerMixin,backTopMixin} from "@/common/mixin";

export default {
  name: "Detail",
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodsList,
    DetailBottomBar,
    // BackTop,

  },
  mixins:[itemListenerMixin,backTopMixin],
  data() {
    return{
      iid: null,
      topImages:[],
      goods:{},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},
      recommends:[],
      // 联动效果中，四个板块 （商品、参数、评论、推荐）位置的值Y
      themeTopYs:[0,1000,2000,3000],
      // 防抖
      // getThemeTopY:null,
      //记录当前滚动区域（0、1、2、3）
      currentIndex:0,
      isShowBackTop: false,
    }
  },
  created() {
    // 1.保存存入的iid
    this.iid = this.$route.params.iid
    // 2.根据iid请求详情数据
    getDetail(this.iid).then(res =>{
      // 1.获取数据
      console.log(res);
      const data = res.result;
      // 2.获取顶部的图片轮播数据
      this.topImages = data.itemInfo.topImages
      // 3.获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
      // 4.获取店铺信息，创建店铺信息的对象
      this.shop = new Shop(data.shopInfo)
      // 5.获取商品详细图片信息
      this.detailInfo = data.detailInfo
      // 6.获取参数信息
      this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
      // 7.获取评论信息
      if(data.rate.cRate !== 0){
        this.commentInfo = data.rate.list[0]
      }
      // 1.第一次获取，值不对
      // 值不对的原因：this.$refs.params.$el压根没有渲染
      // this.themeTopYs = []
      // this.themeTopYs.push(0);
      // this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      // this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      // this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
      // console.log(this.themeTopYs);

      // 2.第二次获取，值不对
      // 值不对的原因：图片没有计算在内
      // created是不会进行dom渲染的，如果想拿到数据或者实时更新数据用nextTick
      // 根据最新的数据，对应的dom是已经被渲染出来
      // 但是图片依然是没有加载完（目前获取到的offsetTop是不包含图片的）
      // offsetTop值不对的时候，都是因为图片的问题
      // this.$nextTick(() =>{
      //   this.themeTopYs = []
      //   this.themeTopYs.push(0);
      //   this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      //   this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      //   this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
      //   console.log(this.themeTopYs);
      // })

    })
    // 3.请求推荐数据
    getRecommend().then(res =>{
      this.recommends = res.data.list
    })
    // 4.给getThemeTopY赋值(对给themeTopYs赋值的操作进行防抖)
  //   this.getThemeTopY = debounce(() =>{
  //     console.log('-----');
  //     this.themeTopYs = []
  //     this.themeTopYs.push(0);
  //     this.themeTopYs.push(this.$refs.params.$el.offsetTop-44)
  //     this.themeTopYs.push(this.$refs.comment.$el.offsetTop-44)
  //     this.themeTopYs.push(this.$refs.recommend.$el.offsetTop-44)
  //     console.log(this.themeTopYs);
  //   })
  },
  mounted() {

  },
  updated() {

  },
  destroyed(){
    // console.log('destroyed');
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  methods:{
    imageLoad(){
      this.$refs.scroll.refresh()

      //32-1点击标题，滚动到对应的主题
      // 3.第三次获取y值，值正确，但是调用太频繁，要使用防抖函数  32、标题和内容的联动效果
      this.themeTopYs = []
      this.themeTopYs.push(0)
      this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
      // this.themeTopYs.push(Number.MAX_VALUE)
      // console.log(this.themeTopYs);
      // console.log('------');
      // this.getThemeTopY()
    },

    // 点击标题，切换到对应板块
    titleClick(index){
      // console.log(index);
      // 滚动到y的位置
      this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
    },

    // 32-2滚动页面，自动切换到相应的标题
    contentScroll(position){
      // 1.获取y值
      const positionY = -position.y
      // 2.positionY和主题中的值进行对比[0, 13867, 15139, 15355,Number.MIN_VALUE]
      // positionY在 0 和 13867 之间,index = 0
      // positionY在 1386 和 15139 之间,index = 1
      // positionY在 15139 和 15355 之间,index = 2
      // positionY超过 15355,index = 3
      // console.log(Number.MAX_VALUE);

      let length = this.themeTopYs.length
      for(let i = 0 ; i < length; i++){
        if(this.currentIndex !==i &&((i< length-1 && positionY >= this.themeTopYs[i] && positionY< this.themeTopYs[i+1]) || (i === length -1 && positionY >= this.themeTopYs[i]))){
          this.currentIndex = i;
          // // 将currentIndex传给DetailNavBar组件，实现联动
          this.$refs.nav.currentIndex = this.currentIndex
          // // console.log(this.currentIndex);
          // console.log(this.currentIndex);
        }
      }

      // 3.是否显示回到顶部，判断BackTop小图标是否显示
      this.isShowBackTop = -position.y > 1000
    },
    // backClick() {
    //   this.$refs.scroll.scrollTo(0, 0)
    // },

    // 35、加入购物车功能,监听点击事件
    addToCart() {
      // 1.获取购物车需要展示的信息
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid
      // 2.使用Vuex将商品添加到购物车里
      // this.$store.commit('addCart',product)  mutations中这样调用
      // this.addCart(product).then(res =>{
      //   this.$toast.show(res,2000)
      // })
      //actions调用
      this.$store.dispatch('addCart',product).then(res =>{
        this.$toast.show(res,2000)
      })
    }
  }
}
</script>

<style scoped>
/*隐藏底部*/
  #detail{
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

/*Bscroll滚动*/
  .content{
    height: calc(100% - 44px - 58px);
  }
/*显示顶部导航栏*/
  .detail-nav{
    /*相对定位依然保持在自己原来的位置，一般用来微调或者用来写z-index*/
    position: relative;
    z-index: 9;
    background-color: #fff;
  }
</style>
